<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>监狱人员后台管理系统</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="res/css/bootstrap.min.css" rel="stylesheet">
<link href="res/css/materialdesignicons.min.css" rel="stylesheet">
<link href="res/css/animate.css" rel="stylesheet">
<link href="res/css/style.min.css" rel="stylesheet">
<link href="res/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
</head>
  
<body>
<div class="container-fluid p-t-15">
  
  <div class="row">
    <div class="col-lg-12">
		
      <div class="card">
        <div class="card-header"><h4>后台管理员</h4></div>

        <div class="card-body">

          <div id="toolbar" class="toolbar-btn-action">
			<button id="btn_add" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">新增管理员</button>
			<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
			  <div class="modal-dialog" role="document">
				  
			    <div class="modal-content">
					
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			      </div>

				<!-- 新增 -->
			 <div class="card-body">
			   <form action="" method="post" onsubmit="return false;" name="AdminForm" id="AdminForm">
				 <input type="text" hidden="hidden" id="submitType" value="add" />
				 <input type="text"  id="id" name="id" hidden="hidden">
			     <div class="form-group">
			       <label for="username">账号</label>
			       <input class="form-control" type="text"  id="username" name="username" placeholder="请输入账号..">
			     </div>
			     <div class="form-group">
			       <label for="password">密码</label>
			       <input class="form-control" type="password" id="password" name="password" placeholder="请输入密码..">
			     </div>
			     <div class="form-group">
			       <button class="btn btn-primary" type="submit" onclick="formSubmit()">确定</button>
			     </div>
			   </form>
			 </div>
			 
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			      </div>
				  
			    </div>
			  </div>
			</div>
          </div>
		  
		  
		  
          <table id="tb_departments">
			  
		  </table>
 
        </div>
      </div>
    </div>
    
    
    
  </div>
  
</div>

<script type="text/javascript" src="res/js/jquery.min.js"></script>
<script type="text/javascript" src="res/js/bootstrap.min.js"></script>
<script type="text/javascript" src="res/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="res/js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="res/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

<!--行内编辑插件-->
<link href="res/js/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.min.css" rel="stylesheet">
<script type="text/javascript" src="res/js/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script type="text/javascript" src="res/js/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js"></script>

<script type="text/javascript" src="res/js/main.min.js"></script>
<script type="text/javascript">
    $('#tb_departments').bootstrapTable({
      classes: 'table table-bordered table-hover table-striped',
      url: '/Final_ssm2/admin/Admin_table',
      method: 'get',
      dataType : 'json',
      uniqueId: 'id',
      idField: 'id',             // 每行的唯一标识字段
      toolbar: '#toolbar',       // 工具按钮容器
      clickToSelect: true,     // 是否启用点击选中行
      showColumns: true,         // 是否显示所有的列
      showRefresh: true,         // 是否显示刷新按钮
		 contentType: "application/x-www-form-urlencoded",
      success:function (data){
        console.log(data)
      },
      //showToggle: true,        // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)

      pagination: true,                    // 是否显示分页
      sortOrder: "asc",                    // 排序方式
      queryParams: function(params) {
        var temp = {
          limit: params.limit,         // 每页数据量
          offset: params.offset,       // sql语句起始索引
          page: (params.offset / params.limit) + 1,
          sort: params.sort,           // 排序的列名
          sortOrder: params.order      // 排序方式'asc' 'desc'
        };
        return temp;
      },                                   // 传递参数
      sidePagination: "server",            // 分页方式：client客户端分页，server服务端分页
      pageNumber: 1,                       // 初始化加载第一页，默认第一页
      pageSize: 2,                        // 每页的记录行数
      pageList: [10, 25, 50, 100],         // 可供选择的每页的行数

      columns: [{
        checkbox: true    // 是否显示复选框
      }, {
        field: 'id',
        title: 'ID',
        sortable: true    // 是否排序
      }, {
        field: 'username',
        title: '账号'
      }, {
        field: 'password',
        title: '密码',
      }, {
        field: 'operate',
        title: '操作',
        formatter: btnGroup,  // 自定义方法
        events: {
          'click .edit-btn': function (event, value, row, index) {
            editUser(row.id);
          },
          'click .del-btn': function (event, value, row, index) {
            delUser(row.id);
          },
          'click .show-btn': function (event, value, row, index) {
            showUser(row.id);
          }
        }
      }],

      onLoadSuccess: function(data){
        $("[data-toggle='tooltip']").tooltip();
      }
    });
// 操作按钮
function btnGroup ()
{
    let html =
        '<a href="#!" class="btn btn-xs btn-default m-r-5 edit-btn" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>' +
        '<a href="#!" class="btn btn-xs btn-default m-r-5 show-btn" title="查看" data-toggle="tooltip"><i class="mdi mdi-eye"></i></a>' +
        '<a href="#!" class="btn btn-xs btn-default del-btn" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>';
    return html;
}

// 操作方法 - 编辑
function editUser(id)
{
	$('#id').val(id);
	$('#submitType').attr('value','edit');
	$('#exampleModal').modal('show');
	$.ajax({
	  url:'/Final_ssm2/admin/getDetail?id='+id,
	  dataType:'json',
	  type:'get',
	  success(res){
	    console.log(res);
	    if(res.message==="success"){
			$('#username').val(res.data.username);
			$('#password').val(res.data.password);
	    }else if ((res.message==="error")){
	      alert('查看失败！');
	    }else if ((res.message==="error_permission")){
        alert('无权限！');
		}else {
	     alert('未知错误！');
	    }
	  },
	  error(){
	    alert('系统错误');
	  }
	})
}
// 操作方法 - 删除
function delUser(id)
{
  $.ajax({
    url:'/Final_ssm2/admin/delete?id='+id,
    dataType:'json',
    type:'get',
    success(res){
      console.log(res);
      if(res.message==="success"){
        alert('删除成功！');
		  $('#tb_departments').bootstrapTable('refresh');
      }else if ((res.message==="error")){
	      alert('查看失败！');
	    }else if ((res.message==="error_permission")){
        alert('无权限！');
		}else {
	     alert('未知错误！');
	    }
    },
    error(){
      alert('系统错误');
    }
  })
}
// 操作方法 - 查看
function showUser(id)
{
	$('#submitType').val('look');
	$('#exampleModal').modal('show');
    $.ajax({
      url:'/Final_ssm2/admin/getDetail?id='+id,
      dataType:'json',
      type:'get',
      success(res){
        console.log(res);
        if(res.message==="success"){
			$('#id').val(id);
    		$('#username').val(res.data.username);
    		$('#password').val(res.data.password);
        }else if ((res.message==="error")){
          alert('查看失败！');
        }else {
          alert('未知错误！');
        }
      },
      error(){
        alert('系统错误');
      }
    })
}

function add() {
    $.ajax({
      url:'/Final_ssm2/admin/add',
      dataType:'json',
      type:'get',
	  data:{
		  username:$('#username').val(),
		  password:$('#password').val(),
},
      success(res){
        console.log(res);
        if(res.message==="success"){
          alert('添加成功！');
			$('#tb_departments').bootstrapTable('refresh');
			$('#username').val('');
			$('#password').val('');
        }else if ((res.message==="error")){
	      alert('查看失败！');
	    }else if ((res.message==="error_permission")){
        alert('无权限！');
		}else {
	     alert('未知错误！');
	    }
      },
      error(){
        alert('系统错误');
      }
    })
}

function formSubmit(){
	//表单类型：1、添加 2、查看 3、修改
	var submitType=$('#submitType').val();
	if(submitType==="add"){
		$('#AdminForm').bootstrapTable("removeAll");
		add();
	}else if(submitType==="edit"){
		$.ajax({
			url:'/Final_ssm2/admin/edit',
			dataType:'json',
			type:'post',
			data:{
				id:$('#id').val(),
				username:$('#username').val(),
				password:$('#password').val()
			},
			success(res){
				console.log(res);
				if(res.message==="success"){
					alert('修改成功！');
					$('#tb_departments').bootstrapTable('refresh');
					$('#id').val('');
					$('#username').val('');
					$('#password').val('');
				}else if ((res.message==="error")){
					alert('修改失败！');
				}else {
					alert('未知错误！');
				}
			},
			error(){
				alert('系统错误');
			}
		})
	}else if(submitType==="look"){
		$('#exampleModal').modal('hide');
	}
}

//窗口关闭事件监听
	$("#exampleModal").on("hide.bs.modal",function(){
		console.log("------");
		$("#username").val("");
		$('#submitType').attr('value','add');
		$("#password").val("");
	});


</script>

</body>
</html>